<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:jsf="http://xmlns.jcp.org/jsf">
    <h:head>
    </h:head>
    <h:body>
        <f:metadata>
            <f:viewParam name="dataverseId" value="#{manageGroupsPage.dataverseId}"/>
            <f:viewAction action="#{dataverseSession.updateLocaleInViewRoot}"/>
            <f:viewAction action="#{manageGroupsPage.init}"/>
            <f:viewAction action="#{dataverseHeaderFragment.initBreadcrumbs(manageGroupsPage.dataverse, bundle['dataverse.manageGroups.pageTitle'])}"/>
        </f:metadata>
        <ui:composition template="/dataverse_template.xhtml">
            <ui:param name="pageTitle" value="#{bundle['dataverse.manageGroups.pageTitle']}"/>
            <ui:param name="dataverse" value="#{manageGroupsPage.dataverse}"/>
            <ui:param name="showMessagePanel" value="#{true}"/>
            <ui:define name="body">
                <h:form id="manageGroupsForm">
                    <div class="form-group clearfix">
                        <div class="pull-right">
                            <p:commandLink id="createGroup" styleClass="btn btn-default"
                                           actionListener="#{manageGroupsPage.initExplicitGroupDialog}"
                                           update="explicitGroupNewDialog" oncomplete="PF('explicitGroupForm').show();handleResizeDialog('explicitGroupNewDialog');">
                                <span class="glyphicon glyphicon-plus"/> #{bundle['dataverse.manageGroups.createBtn']}
                            </p:commandLink>
                        </div>
                    </div>
                    <div>
                        <div id="no-groups-message" class="panel panel-default" jsf:rendered="#{empty manageGroupsPage.explicitGroups}">
                            <div class="panel-body">
                                <span class="help-block h3">#{bundle['dataverse.manageGroups.noGroups.why.header']}</span>
                                <ul>
                                    <li><h:outputText value="#{bundle['dataverse.manageGroups.noGroups.why.reason1']}" escape="false"/></li>
                                    <li><h:outputText value="#{bundle['dataverse.manageGroups.noGroups.why.reason2']}" escape="false"/></li>
                                </ul>
                                <span class="help-block h3">#{bundle['dataverse.manageGroups.noGroups.how.header']}</span>
                                <ul>
                                    <li><h:outputText value="#{bundle['dataverse.manageGroups.noGroups.how.tip1']}" escape="false"/></li>
                                    <li>
                                        <h:outputFormat value="#{bundle['dataverse.manageGroups.noGroups.how.tip2']}" escape="false">
                                            <f:param value="#{manageTemplatesPage.dataverse.alias}"/>
                                        </h:outputFormat>
                                    </li>
                                </ul>
                                <p>
                                    <h:outputFormat value="#{bundle['dataverse.manageGroups.noGroups.getStarted']}" escape="false">
                                        <f:param value="#{systemConfig.guidesBaseUrl}"/>
                                        <f:param value="#{systemConfig.guidesVersion}"/>
                                    </h:outputFormat>
                                </p>
                            </div>
                        </div>
                        <p:dataTable id="allGroups" styleClass="manageTable" var="explicitGroup" value="#{manageGroupsPage.explicitGroups}"
                                     rendered="#{!empty manageGroupsPage.explicitGroups}">
                            <p:column width="30%" sortBy="#{explicitGroup.displayName}" headerText="#{bundle['dataverse.manageGroups.tab.header.name']}">
                                <h:outputText value="#{explicitGroup.displayName}" />
                            </p:column>
                            <p:column width="20%" sortBy="#{explicitGroup.getIdentifier()}" headerText="#{bundle['dataverse.manageGroups.tab.header.id']}">
                                <h:outputText value="#{explicitGroup.getIdentifier()}" />
                            </p:column>
                            <p:column width="20%" class="text-center" headerText="#{bundle['dataverse.manageGroups.tab.header.membership']}">
                                <h:outputText value="#{manageGroupsPage.getMembershipString(explicitGroup)}" />
                            </p:column>
                            <p:column width="30%" class="col-manage-action col-button-action text-center" headerText="#{bundle['dataverse.manageGroups.tab.header.action']}">
                                <div class="button-block">
                                    <div class="btn-group" role="group">
                                        <p:commandLink styleClass="btn btn-default bootstrap-button-tooltip"
                                                       action="#{manageGroupsPage.viewSelectedGroup(explicitGroup)}"
                                                       oncomplete="PF('viewGroup').show();"
                                                       update=":manageGroupsForm"
                                                       title="#{bundle['dataverse.manageGroups.tab.action.btn.edit']}">
                                            <span class="glyphicon glyphicon-edit"></span>
                                        </p:commandLink>
                                        <p:commandLink styleClass="btn btn-default bootstrap-button-tooltip"
                                                       action="#{manageGroupsPage.clickDeleteGroup(explicitGroup)}"
                                                       update="@form"
                                                       oncomplete="PF('deleteConfirmation').show()"
                                                       title="#{bundle['dataverse.manageGroups.tab.action.btn.delete']}">
                                            <span class="glyphicon glyphicon-trash"></span>
                                        </p:commandLink>
                                    </div>
                                </div>
                            </p:column>
                        </p:dataTable>
                    </div>
                    <p:dialog id="deleteGroupConfirm" header="#{bundle['dataverse.manageGroups.tab.action.btn.delete.dialog.header']}" widgetVar="deleteConfirmation" modal="true">
                        <p class="help-block">
                            <span class="glyphicon glyphicon-warning-sign text-warning"/> <span class="text-warning">#{bundle['dataverse.manageGroups.tab.action.btn.delete.dialog.tip']}</span>
                        </p>
                        <div class="button-block">
                            <p:commandButton styleClass="btn btn-default" value="#{bundle.continue}" rendered="#{manageGroupsPage.renderDeletePopup}"  onclick="PF('deleteConfirmation').hide()" action="#{manageGroupsPage.deleteGroup()}" update="manageGroupsForm,messagePanel"/>
                            <p:commandButton styleClass="btn btn-link" value="#{bundle.cancel}" onclick="PF('deleteConfirmation').hide()"/>
                        </div>
                    </p:dialog>
                    <p:dialog id="viewGroup" styleClass="largePopUp" header="#{bundle['dataverse.manageGroups.tab.action.btn.view.dialog.header']}" widgetVar="viewGroup" modal="true">
                        <p:focus context="viewGroup"/>
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label for="select_GroupName" class="col-sm-3 control-label">
                                    #{bundle['dataverse.manageGroups.tab.action.btn.view.dialog.group']}
                                </label>
                                <div class="col-sm-7">
                                    <p class="form-control-static">
                                        #{manageGroupsPage.selectedGroup.displayName}
                                    </p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="select_GroupMembers" class="col-sm-3 control-label">
                                    #{bundle['dataverse.manageGroups.tab.action.btn.view.dialog.groupMembers']}
                                </label>
                                <div class="col-sm-7">
                                    <p:autoComplete id="addRoleAssigneeName" placeholder="#{bundle['dataverse.manageGroups.tab.action.btn.view.dialog.enterName']}"
                                                    multiple="true" scrollHeight="180" forceSelection="true" 
                                                    minQueryLength="2" queryDelay="1000"                                      
                                                    groupBy="#{roleAssignee.identifier.startsWith('@')?'Users':'Groups'}"                                                   
                                                    emptyMessage="#{bundle['dataverse.manageGroups.tab.action.btn.view.dialog.invalidMsg']}"
                                                    value="#{manageGroupsPage.selectedGroupAddRoleAssignees}"
                                                    completeMethod="#{manageGroupsPage.completeRoleAssignee}"
                                                    var="roleAssignee"
                                                    onkeypress="return event.keyCode !== 13;"
                                                    styleClass="DropdownPopup" panelStyleClass="DropdownPopupPanel"
                                                    itemLabel="#{roleAssignee.displayInfo.title}" itemValue="#{roleAssignee}" converter="roleAssigneeConverter">
                                        <p:column>
                                            <h:outputText value="#{roleAssignee.displayInfo.title}"/>
                                            <h:outputText value=" (#{roleAssignee.displayInfo.affiliation})" rendered="#{!empty roleAssignee.displayInfo.affiliation}"/>
                                        </p:column>
                                        <p:column>
                                            <h:outputText value="#{roleAssignee.identifier}"/>
                                        </p:column>
                                        <p:ajax process="@this" event="itemSelect" />
                                        <p:ajax process="@this" event="itemUnselect" />
                                    </p:autoComplete>
                                    <!-- <p:message for="roleAssigneeName" display="text"/> -->
                                </div>
                            </div>
                        </div>
                        <p:dataTable id="groupMembers"
                                     var="groupMember"
                                     rendered="#{manageGroupsPage.selectedGroup != null}"
                                     value="#{manageGroupsPage.getExplicitGroupMembers(manageGroupsPage.selectedGroup)}">
                            <!-- Member Name -->
                            <p:column width="31%"
                                      sortBy="#{groupMember.getDisplayInfo().getTitle()}"
                                      headerText="#{bundle['dataverse.manageGroups.tab.action.btn.view.dialog.groupView.name']}">
                                <h:outputText value="#{groupMember.getDisplayInfo().getTitle()}" />
                            </p:column>
                            <!-- Member Type -->
                            <p:column width="13%"
                                      headerText="#{bundle['dataverse.manageGroups.tab.action.btn.view.dialog.groupView.type']}">
                                <h:outputText value="#{manageGroupsPage.getRoleAssigneeTypeString(groupMember)}" />
                            </p:column>
                            <!-- Action  -->
                            <p:column width="13%"
                                      headerText="#{bundle['dataverse.manageGroups.tab.action.btn.view.dialog.groupView.action']}">
                                <p:commandLink styleClass="btn btn-default bootstrap-button-tooltip"
                                               update="groupMembers"
                                               action="#{manageGroupsPage.removeMemberFromSelectedGroup(groupMember)}"
                                               title="#{bundle['dataverse.manageGroups.tab.action.btn.view.dialog.groupView.delete']}">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </p:commandLink>
                            </p:column>
                        </p:dataTable>
                        <!-- Add Group Members -->
                        <div class="button-block">
                            <p:commandButton id="saveGroup" styleClass="btn btn-default" rendered="#{manageGroupsPage.getSelectedGroup()!=null}"
                                           actionListener="#{manageGroupsPage.saveExplicitGroup}"
                                           value="#{bundle.saveChanges}"
                                           update="manageGroupsForm,messagePanel">
                            </p:commandButton>
                            <button class="btn btn-link" onclick="PF('viewGroup').hide()" type="button">
                                #{bundle.cancel}
                            </button>
                        </div>
                    </p:dialog>
                    <!-- Explicit Group Edit Popup -->
                    <ui:include src="explicitGroup-new-dialog.xhtml"/>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
